<template>
  <div>
    <header-top title="考试详情" >
      <div @click="back" class="back" slot="back"></div>
    </header-top>
    <div style="background:#f8f8f8" class="content clearfix">

      <div @click="showSelect" class="select">
        请选择科目：{{subjectName}}
      </div>

      <ul class="exam">
        <li>
          <div class="studentTitle clearfix">
            <p>姓名</p>
            <p>班级</p>
            <p></p>
            <p>分数</p>
          </div>
        </li>
        <li :ref="item.studentId" v-if="examShow" v-for="(item,index) of scoreList" :key="item.studentId" @click="getStudentScore(item.studentId,index)">
          <div class="student clearfix">
            <p>{{item.studentName}}</p>
            <p>{{item.gradeName + item.className}}</p>
            <p></p>
            <p>{{item.totalScore}}</p>
            <i></i>
          </div>
          <ul  class="ExamCon clearfix">
            <li v-for="subject of item.studnetScore">
              <p>{{subject.subjectName}}：</p><span>{{subject.score}}</span>
            </li>
          </ul>
        </li>
        <li v-if="!examShow" v-for="item of subjectList" :key="item.studentId">
          <div class="student clearfix">
            <p>{{item.fullName}}</p>
            <p>{{className}}</p>
            <p></p>
            <p>{{item.score}}</p>

          </div>
        </li>
      </ul>

    </div>


    <div v-if="show" class="zz"></div>
    <van-picker
      class="fixedBottom"
      v-if="show"
      show-toolbar
      title="选择科目"
      :columns="columns"
      @cancel="onCancel"
      @confirm="onConfirm"
      :default-index=index
    />
  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import {reqExamSubject,reqScore,reqSubjectScore,reqStudentScore} from "@/api";

  export default {
    name: "studentExamDetail",
    data(){
      return {
        params:{
        },
        examShow:true,
        subjectName:'总分',
        subjectId:null,
        className:null,
        columns: [{text:'总分',subjectId:null}],
        content:'标题',
        index:0,
        show:false,
        scoreList:null,
        subjectList:null,
      }
    },
    async mounted(){
      //获取路由传入参数
      this.params =  this.$route.query

      let sub = await reqExamSubject(this.params.examId)
      for(let item of sub.data) {
        this.columns.push({text:item.subjectName,subjectId:item.subjectId})
      }
      this.getScore()


    },
    components:{
      headerTop:headerTop,
    },
    methods:{
      back(){
        this.$router.replace({path:'/class/exam/studentExam/list',query:this.params})
      },
      showSelect(){
        this.show = true;
      },
      onCancel() {
        this.show = false
      },
      onConfirm(value,index){
        this.subjectName = value.text
        this.subjectId = value.subjectId
        this.show = false
        this.index = index
        this.getScore()
      },
      async getScore(){
        if(this.subjectId){
          //科目成绩
          this.examShow = false
          let subjectSorce = await reqSubjectScore(this.params.examId,this.params.classId,this.subjectId,this.params.studentName)
          this.subjectList = subjectSorce.data

        }else{
          //总分
          this.examShow = true
          let score = await reqScore(this.params.examId,this.params.classId,this.params.studentName)
          this.scoreList = score.data
          this.className = this.scoreList[0].gradeName + this.scoreList[0].className
        }

      },
      async getStudentScore(studentId,index){
        let studnetScore = await reqStudentScore(this.params.examId,studentId)
        this.scoreList[index].studnetScore = studnetScore.data
        this.$forceUpdate();//重新渲染
      }

    }
  }
</script>

<style scoped>
  .exam{width: 100%; background: #fff;}
  .studentTitle,.student{ border-bottom: 1px solid #f8f8f8}
  .studentTitle p,.student p{ height:2.8rem;line-height: 2.8rem;font-size: 1.1rem;color: #666; float: left; text-align: center; box-sizing: border-box; }
  .studentTitle p{color: #00c08c}
  .studentTitle p:nth-child(1),.student p:nth-child(1){
    width:30%;
  }
  .studentTitle p:nth-child(2),.student p:nth-child(2){
    width:40%;
  }
  .studentTitle p:nth-child(3),.student p:nth-child(3){
    width:5%;
  }

  .student p:nth-child(4){
    width:15%;
  }
  .studentTitle p:nth-child(4){
    width:25%;
  }
  .student i{ float: left; width:10%; height: 2.8rem; background: url("./images/studentIcon.png") no-repeat center;}
  .ExamCon{width: 100%;border-bottom: 1px solid #f8f8f8}
  .ExamCon li{ width: calc(100% / 3); float: left; height: 2.8rem; line-height: 2.8rem; font-size: 1.1rem; padding: 0 1.5rem; box-sizing: border-box; color: #666;}
  .ExamCon li p{float:left; color:#999; }
  .ExamCon li span{float:right;color:#999; }


</style>
